<template>
  <el-row class="detail-row">
    <el-card class="detail-card">
      <Title title="发布信息" style="margin-bottom:18px;"/>
      <el-form ref="formRef" style="padding-left: 12px;">
        <el-col :span="24">
          <el-col :span="10">
            <el-form-item class="FileShowList" prop="attachment" label="附件：" style="display:flex;">
              <!-- <div class="attachment-container" style="width: 240px;">
                <upAttachment
                  ref="uploadImg"
                  :import-api="'/admin/order/file/upload'"
                  :hide-confirm="true"
                  :is-disabled="isFileDisabled || !isPublishAuth"
                  :file-list="paramsObj.attachment"
                  :extend-params="{
                    orderId:orderInfo.orderId || '', type: 1
                  }"
                  btn-text="上传文件"
                  @upProgress="upProgress"
                  @complateSetData="complateSetData"
                  @removeFileList="removeFileList" />
              </div> -->
              <FileShowList :file-list="orderInfo.attachment" is-show-single-file />
            </el-form-item>
          </el-col>
          <!-- 销售无法查看下单链接 -->
          <el-col :span="12">
            <el-form-item label="下单链接：" prop="orderLink">
              <!-- <div v-if="orderStatus === 1" style="display:inline-block;">
                <el-input :disabled="isFileDisabled || !isPublishAuth" v-model.trim="paramsObj.orderLink" size="small" name="orderLink" type="text" maxlength="500"/>
              </div> -->
              <div v-if="isLink(orderInfo.orderLink)" style="display:flex;align-items:center;">
                <el-tooltip placement="top">
                  <span slot="content" style="max-width:200px;">{{ orderInfo.orderLink }}</span>
                  <a :href="orderInfo.orderLink" target="_blank" class="resource-link">点击跳转</a>
                </el-tooltip>
                <img ref="copy" :src="copyIcon" :data-clipboard-text="orderInfo.orderLink" class="copy-icon" alt="" @click="copyLink()">
              </div>
              <div v-else>
                {{ orderInfo.orderLink || '--' }}
              </div>
            </el-form-item>
          </el-col>
        </el-col>
      </el-form>
    </el-card>
  </el-row>
</template>

<script>
import { mapState } from 'vuex';

import {
} from '@/filters/status';
import Title from '@/components/Title';
import selectWithoutHttp from '@/components/Common/selectWithoutHttp';
import selectWithUserLoad from '@/components/Common/selectWithUserLoad';
import upAttachment from '@/components/Common/upAttachment/index';
import FileShowList from '@/components/CreateOrder/fileShowList';
import copyIcon from '@/assets/orderlist/copy.png';
import ElMessage from '@/utils/message';
import { importCDN } from '@/utils/importCDN';
export default {
  components: { Title, FileShowList, selectWithoutHttp, selectWithUserLoad, upAttachment },
  filters: {
    cooperation: (data) => {
      if (!data || data.length === 0) return '--';
      return data.map(i => i.name).join(',');
    }
  },
  props: {
    orderInfo: {
      type: Object,
      default: () => {
        return {};
      }
    },
    detailInfo: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      copyIcon,
      deptListData: [],
      paramsObj: {
        attachment: [],
        orderLink: ''
      },
      copyBtn: null
      // rules: {
      //   orderLink: [{ required: true, trigger: 'blur', validator: validateLink('请填写下单链接') }],
      //   attachment: [{ required: true, trigger: 'change', validator: validateFile('请上传附件') }]
      // }
    };
  },
  computed: {
    ...mapState({
      'userInfo': state => state.user.userInfo
    })
  },
  beforeCreate() {
    importCDN(['clipboard']);
  },
  created() {
    this.$nextTick(() => {
      this.paramsObj.attachment = this.orderInfo.attachment;
      this.paramsObj.orderLink = this.orderInfo.orderLink;
      if (this.$refs.copy) {
        const timer = setTimeout(() => {
          // eslint-disable-next-line no-undef
          this.copyBtn = new Clipboard(this.$refs['copy']);
          this.copyBtn.on('success', function() {
            ElMessage.success('复制成功');
          });
          clearTimeout(timer);
        }, 2000);
      }
    });
  },
  methods: {
    setOrderOperator(data) {
      if (!data || data.length === 0) return '--';
      const name = data.map(i => i.userName);
      return name.join(',');
    },
    // 上传文件
    upProgress() {
      this.createLoading = true;
    },
    complateSetData({ data, fileName }) {
      this.createLoading = false;
      const fileList = {
        name: fileName,
        url: data.url,
        time: new Date().getTime()
      };
      if (typeof data === 'string') {
        fileList.url = data;
      } else {
        fileList.url = data.url;
      }
      this.paramsObj.attachment.push(fileList);
    },
    removeFileList({ file, index }) {
      this.paramsObj.attachment.splice(index, 1);
    },
    getParams() {
      const params = JSON.parse(JSON.stringify(this.paramsObj));
      return params;
    },
    isLink(url) {
      if (!url) return false;
      return url.indexOf('http://') === 0 || url.indexOf('https://') === 0;
    },
    copyLink() {
      /* 这是点击按钮触发的点击事件，关于clipboard的使用就不再赘述了，上面介绍时已经讲述过，并且使用方法在官方文档上有*/
      if (!this.copyBtn && this.$refs.copy) {
        // eslint-disable-next-line no-undef
        this.copyBtn = new Clipboard(this.$refs['copy']);
      }
      if (this.copyBtn) {
        this.copyBtn.on('success', function() {
          ElMessage.success('复制成功');
        });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.detail-card {
  &::v-deep {
    .el-input__inner  {
      width: 240px;
      line-height: 16px;
    }
  }
}
.resource-link {
  cursor: pointer;
  color: #406EFF;
}
.copy-icon {
  width: 16px;
  margin-left: 5px;
  cursor: pointer;
}
.FileShowList {
  ::v-deep .el-form-item__label {
    flex-shrink: 0;
  }
}
</style>

